<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<pre>
    修饰键
    .ctrl
    .alt
    .shift
    .meta
    修饰键比正常的按键不同；修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。
</pre>
<div id="app">
    code: <input type="text" @keyup="showCode($event)" v-model="code"><br>
    ctrl+c:<input type="text" @keyup.ctrl.67="clone" v-model="txt"><br>
    ctrl+v:<input type="text" @keyup.ctrl.86="insert"><br>
    ctrl: <input type="text" v-model="ctrl" @keyup.ctrl="showCtrl">
</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            code:'',
            txt:'可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。',
            ctrl:''
        },
        methods:{
            showCode: function (event) {
                this.code=event.keyCode;
                console.log('code:',this.code);
            },
            clone: function () {
                console.log('复制内容：',this.txt);
            },
            insert: function () {
                console.log('粘贴内容：',this.txt);
            },
            showCtrl: function () {
                console.log('ctrl')
            }
        }
    });

</script>
</html>